<template>
	<view>
		<view class="search-area-filter">
			<taskFilter @filterItems="handleFilter"></taskFilter>
			<view class="search--bar">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear">
				</uni-search-bar>
			</view>
		</view>
	</view>
	<view class="container" v-if="!loading">
		<uni-list v-for="(item) in taskdata">
			<uni-card class="taskCard" v-bind:title="item.task.title" v-bind:extra="item.task.value"
				@click="onClick(item)" v-bind:style="cardStyle(item)">
				<view class="uni-body">
					<view class="taskDetail">
						<view>描述：{{item.task.description}}</view>
						<view class="mustdo">必做：{{item.task.must}}</view>
					</view>
					<router-view>标签：{{item.task.label}}</router-view>
				</view>
			</uni-card>
		</uni-list>
	</view>
</template>

<script>
	import taskMessageVue from '../taskMessage/taskMessage.vue'
	import taskFilter from '../../components/taskFilter/taskFilter.vue'
	import {
		BASE_URL
	} from '../../api';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {
			taskFilter,
		},
		computed: {
			...mapState(['token', 'children'])
		},
		data() {
			return {
				star: "",
				status: "",
				must: "",
				items: [],
				loading: true,
				background: "background-color=red;",
				sourceType: ['album', 'camera'],
				searchValue: "",
				childrenId: "qweasdzxc",
				result: "",
				value: "1",
				taskdata: [],
				searchStand: [{
						value: this.searchValue,
						name: 'key'
					},
					{
						value: "",
						name: 'status',
					},
					{
						value: '',
						name: 'value',

					},
					{
						value: '',
						name: 'must'
					},
				]
			}
		},
		async onShow() {
			if (this.searchValue == "") {
				let res = await uni.request({
					url: BASE_URL + '/task/' + this.childrenId + '/selectByFilter',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: {
						key: "",
						status: "",
						value: "",
						must: "",
					},
				});
				console.log(res.data.data);
				console.log("try");
				this.taskdata = res.data.data;
				this.loading = false;
			}
		},
		methods: {
			handleFilter(radio1, radio2, radio3) {
				this.star = radio1;
				this.status = radio2;
				this.must = radio3;
				console.log(radio1, radio2, radio3);
				this.search()
			},
			onchange() {},
			async search() {
				console.log("我执行了");
				let res = await uni.request({
					url: BASE_URL + '/task/' + this.childrenId + '/selectByFilter',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: {
						key: this.searchValue,
						status: this.status,
						value: this.star,
						must: this.must,
					},
				});
				console.log("这是查询条件");
				console.log(this.searchValue);
				console.log(this.status);
				console.log(this.star);
				console.log(this.must);
				this.taskdata = res.data.data;
				console.log("这是查到的数据");
				console.log(res.data.data);
			},
			handleItems(items) {
				console.log(items);
			},
			onClick(item) {
				uni.navigateTo({
					url: '/pages/taskMessage/taskMessage?childrenId=' + this.childrenId + '&taskId=' + item.task
						.taskId + '&task=' + JSON.stringify(item.task) + '&taskStatus=' + JSON.stringify(item
							.taskStatus)
				});
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url
				});
			},
			cardStyle(item) {
				return item.backgroundColor + ";"
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('top')
			},

		},
	}
</script>

<style>
	@import url("task.css");
</style>